<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog v-model="props.detailVisible" title="模板详情" @close="cancel('close')" width="800">
    <div class="detail-main">
      <div class="basic_info">
        <div class="title">
          <div>基本信息</div>
        </div>
        <div class="info">
          <div class="item">
            <span>模板名称：</span>
            <span>{{ templateDetail?.templateName }}</span>
          </div>
          <div class="row2">
            <div class="item">
              <span>业务场景：</span>
              <span>{{ templateDetail?.businessSceneName }}</span>
            </div>
            <div class="item">
              <span>要素库类型：</span>
              <span>{{ templateDetail?.databaseType }}</span>
            </div>
          </div>
          <div class="row2">
            <div class="item">
              <span>创建人：</span>
              <span>{{ templateDetail?.createBy }}</span>
            </div>
            <div class="item">
              <span>创建时间：</span>
              <span>{{ templateDetail?.createTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="basic_info">
        <div class="title">
          <div>模板表字段</div>
        </div>
        <el-table :data="columns">
          <el-table-column label="序号" type="index" width="60"></el-table-column>
          <el-table-column label="字段名称" prop="targetField"></el-table-column>
          <el-table-column label="所属表名" prop="tableName"></el-table-column>
          <el-table-column label="字段类型" prop="targetFieldType"></el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" type="primary" @click="cancel('close')"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="templateDetail" setup>
import { queryTemplateById } from '@/api/dataIntegration/dataTemplate/index';
const props = defineProps(['detailVisible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const templateDetail = ref(null);
const columns = ref([]);
const cancel = (type) => {
  emit('handleEvent', { type });
};
onMounted(()=>{
  queryTemplateById(props?.rowData.id).then(res=>{
   if(res){
    templateDetail.value = res?.data;
    const columnsStr = res?.data?.mapFields || '';
    const columnsArr = JSON.parse(columnsStr);
    columns.value = columnsArr;
   }
  })
})
</script>
<style lang="scss" scoped>
.detail-main {
  .basic_info {
    width: 100%;
    font-size: 12px;
    .title {
      background: #fafafa;
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
      padding: 0 10px;
      font-weight: 600;
    }
    .info {
      padding: 10px;
      .item {
        margin-bottom: 5px;
        > span:nth-child(2) {
          color: #909399;
        }
      }
      .row2 {
        display: flex;
        > div {
          width: 50%;
        }
      }
    }
  }
}
</style>